<template>
  <div id="nav" v-bind:style="{ background: bgColor }">
    <!-- Header -->
    <el-row type="flex">
      <!-- Logo -->
      <div class="grid-content" style="width: 300px">
        <img src="../../assets/logoXj.png" style="width:268px; margin:10px" />
      </div>

      <!-- 导航栏 -->
      <el-col :span="18">
        <div class="grid-content">
          <el-menu
            :default-active="activePage"
            mode="horizontal"
            :background-color="bgColor"
            text-color="#fff"
            active-text-color="#ffd04b"
            :router="ifRouter"
            @select="itemSelect"
            style="transition: border-color .3s,background-color .3s,color .3s;"
          >
            <el-menu-item index="Config">
              <i class="el-icon-setting"></i>项目配置
            </el-menu-item>
            <el-menu-item index="Effect">
              <i class="el-icon-tickets"></i>效果中心
            </el-menu-item>
            <el-menu-item index="Tools">
              <i class="el-icon-edit"></i>实用工具
            </el-menu-item>
            <el-menu-item index="Author">
              <i class="el-icon-postcard"></i>关于作者
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activePage: "Config",
      ifRouter: false
    };
  },
  computed: {
    bgColor() {
      return this.$store.state.theme.backgroundColor;
    }
  },
  methods: {
    itemSelect: function(index) {
      if (this.$route.name != index) {
        this.jumpRouter(index);
        sessionStorage.index = index;
      }
    },
    jumpRouter: function(index) {
      this.$router.push({
        name: index
      });
    }
  },
  created: function() {
    this.activePage = sessionStorage.index;
  }
};
</script>

<style scoped>
#nav {
  margin: 0px;
  padding: 15px 20px 20px;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  border-bottom: 1px solid #dcdfe6;
}
.grid-content {
  border-radius: 4px;
  min-height: 40px;
  margin: 0px auto;
  text-align: center;
  vertical-align: middle;
  width: 800px;
}

.el-menu.el-menu--horizontal {
  border-bottom: none;
}
</style>
